import React from 'react'
import { Stack, useRouter } from 'expo-router'
import { zhThemeColor } from '../../global'
import { Image, Text } from 'react-native'

export default function Layout() {
  //在函数式组件最外层，调用钩子，获得路由器对象，用于页面跳转
  let router = useRouter()
  return (
    //mall目录下的页面采用栈式导航，都有类似的顶部导航栏
    //Stack.screenOptions用于配置当前目录下所有页面的共性
    //Screen.options用于配置当前页面的专有个性     
    //上述两个属性的可取值是相同的
    <Stack screenOptions={{
      headerStyle: {backgroundColor: zhThemeColor},   //导航条背景颜色
      headerTintColor: '#fff',          //导航条染色颜色（即文字颜色）
      headerTitleStyle: {fontSize: 16}, //导航条标题文字样式
      headerTitleAlign: 'center',       //导航条标题文字对齐方式
    }}>
      <Stack.Screen
        name="list"         //指定当前页面的路由地址，应该与当前文件名一致
        options={{
          //headerShown: false,         //是否显示标题栏
          title: '商品列表',
          headerLeft: ()=>(<Text onPress={()=>router.replace('/tabs/community')} style={{color:'#fff'}}>返回</Text>), //标题栏左侧要显示的内容
          headerRight: ()=>(<></>),     //标题栏右侧要显示的内容
          //headerTitle: ()=>(<Image source={require('../../assets/img/logo.png')}/>),
        }}/>
      <Stack.Screen
        name="detail"       //指定当前页面的路由地址，应该与当前文件名一致
        options={{
          title: '商品详情'
        }}/>
    </Stack>
  )
}